<template>
  <div class="category-details" align="left">
    <div class="demo-nav">
      <div class="demo-nav__title">{{title}}</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div class="category-details-search">
      <van-search v-model="value" shape="round" background="none" placeholder="请输入搜索关键词" @search="onSearch"/>
    </div>
    <div class="category-details-list" style="text-align: left">
      <div class="material-list-grid" style="width: 45.5%" v-for="(item,index) in products" @click="toDetails(item.productId)">
        <van-image width="10rem" height="10rem" fit="cover" :src="item.picUrlAl"/>
        <div class="material-list-grid-content">
          <div align="left" style="background-color: gainsboro;border-radius: 1rem">
            <van-image style="float: left;margin-top: 0.25rem;margin-left: 0.5rem" round width="1rem" height="1rem" fit="cover" :src="item.supplierPic"/>
            <p style="padding: 0;height: 1.5rem;line-height: 1.55rem;overflow: hidden">专业{{item.categoryName}}直营</p>
          </div>
          <div align="left">
            <p>{{item.productName}}</p>
            <p>{{item.shopsName}}</p>
          </div>
          <div align="left">
            <div>
              <span style="color: goldenrod;background-color: #2c3e50;padding: 0.1rem">市场价</span>
              <span style="font-weight: bolder;font-size: 1rem">￥{{item.price}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import { selectProductByCateGory,selectProductByName,CateGoryName } from '@/api/commodity/shop_product.js'


  export default {
    name: "category_details",
    data(){
      return{
        products: [],
        value:"",
        title:"",
      }
    },
    created() {
      var id = parseInt(this.$route.query.categoryId);
      this.title = this.$route.query.categoryName;
      var categoryNamea = this.$route.query.categoryName;
      // this.productByCateGory(id);
      this.proCateGoryName(categoryNamea);
    },

    methods: {
      toBack(){
        this.$router.go(-1);//返回上一层
      },

      proCateGoryName(categoryName){
        CateGoryName(categoryName).then(res=>{
          this.products = res.data.data;
        })
      },
      // productByCateGory(cateGoryId){
      //   selectProductByCateGory(cateGoryId).then((res) => {
      //     this.products = res.data.data;
      //   });
      // },
      toDetails(productId){
        this.$router.push({path:"/commodity_details",query:{commodityId:productId}});
      },
      onSearch(val) {
        selectProductByName(val).then((res) => {
          this.products = res.data.data;
        });
      },
    }
  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 45px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 12px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .category-details-list{
    position: relative;
    text-align: center;
  }
  .material-list-grid{
    display: inline-block;
    padding: 0.5rem;
  }
  .material-list-grid P,span{
    font-size: 0.5rem;
    padding: 0.1rem 0;
  }
</style>
